<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container"><!-- 轮播 -->
        <div id="demo" class="carousel slide" data-bs-ride="carousel">
         
           <!-- 指示符 -->
          <div class="carousel-indicators">
            <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
          </div>
          
          <!-- 轮播图片 -->
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
            </div>
            <div class="carousel-item">
              <img src="https://static.jyshare.com/images/mix/img_nature_wide.jpg" class="d-block" style="width:100%">
            </div>
            <div class="carousel-item">
              <img src="https://static.jyshare.com/images/mix/img_mountains_wide.jpg" class="d-block" style="width:100%">
            </div>
          </div>
          
          <!-- 左右切换按钮 -->
          <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
          </button>
        </div></div>
    <br>
    <div class="container"><div class="carousel-item">
        <img src="./img/02-lijianming.png" class="d-block" style="width:100%">
        <div class="carousel-caption">
              <h3>第一张图片描述标题</h3>
              <p>第一张图片描述内容显示在这里！！！</p>
        </div>
      </div></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>